console.log('开始canvas绘制之旅')
let canvas=document.getElementById('canvas')

// 元素大小
canvas.style.width='400px'
canvas.style.height='200px'

// 绘制区域的宽高
// 电视，ipad 手机
// canvas 容器宽高，绘制区域大小设置
canvas.width=400
canvas.height=200

// 绘制上下文
const context = canvas.getContext('2d')

context.fillStyle='red'
context.fillRect(0,0,50,50)

context.fillStyle='red'
context.fillRect(0,0,50,50)

context.fillStyle='blue'
// canvas默认绘制起点是左上角
// 当绘制需要频繁在中心，角落，或者是要绘制一个整体的时候，人物
context.translate(50,50)
context.rotate(-Math.PI/6)
context.scale(2,3)
context.fillRect(0,0,50,50)